vue3单文件组件语法糖 | 您所在的位置:网站首页 › vue3 语法糖 › vue3单文件组件语法糖 |
语法糖: 语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会 1, 在语法糖中使用组件传值 import { defineProps, defineEmits, ref } from "vue"使用defineProps自定义属性,接收父组件传值, 新版本无需导入,直接用 const props = defineProps(\['msg']) console.log(props, props.msg) const info = ref("")使用defineEmits自定义事件, 向父组件传值 const emit = defineEmits(\["getinfo"]) function change(){ emit("getinfo", info.value) }2, 在语法糖中使用路由和状态管理 从路由模块中导入路由组合式API函数, 调用函数即可获取路由数据 import { useRoute, useRouter } from "vue-router" const route = useRoute() const router = useRouter() console.log(route, router)从vuex模板中导入状态仓库组合式API(hook)函数, 调用即可获取状态仓库 import { useStore } from "vuex" const store = useStore() console.log(store, store.state.address) store.commit("setAddress", "")3, 在vue3中绑定动态样式 b{ text-decoration: underline; font-size: v-bind(mySize1); color: v-bind(myColor); }4, 在setup/语法糖中使用组件路由守卫 // 从vue-router模块中导入路由守卫 import {onBeforeRouteUpdate, onBeforeRouteLeave } from "vue-router" //在setup/语法糖中调用路由守卫 onBeforeRouteUpdate((to, from, next)=>{ console.log('路由进更新前'); next() }) onBeforeRouteLeave((to, from, next)=>{ console.log('路由离开前'); next() })注意: vue-router4.0 废除了组件内的守卫BeforeRouteEnter, 另外两个守卫BeforeRouteUpdate, BeforeRouteLeave 正常 5, 在路由出口添加keep-alive 6, 切换路由模式 默认的历史模式 history: createWebHistory(process.env.BASE_URL), 切换哈希模式 history: createWebHashHistory(process.env.BASE_URL), |
CopyRight 2018-2019 实验室设备网 版权所有 |